panelCorner: Only overlap panel if necessary

The panel corners overlap the panel in order to hide the underline
used for active buttons where it is supposed to arc downwards
following the roundness of the corner.
Unfortunately this prevents us from using a transparent panel background,
as the overlapped area ends up with the wrong transparency. Work around
this limitation by only overlapping the panel if there is a visible
border.

https://bugzilla.gnome.org/show_bug.cgi?id=684573

diff --git a/js/ui/panel.js b/js/ui/panel.js
index ba02a4955d549fd414ff76c5539ff1cae717f39f..65ca664b7f6a467e07d7d612a7bcd7a335edc9be 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -882,10 +882,13 @@ const PanelCorner = new Lang.Class({
         let backgroundColor = node.get_color('-panel-corner-background-color');
         let borderColor = node.get_color('-panel-corner-border-color');
 
+        let noOverlap = borderColor.alpha == 0;
+        let offsetY = noOverlap ? borderWidth : 0;
+
         let cr = this.actor.get_context();
         cr.setOperator(Cairo.Operator.SOURCE);
 
-        cr.moveTo(0, 0);
+        cr.moveTo(0, offsetY);
         if (this._side == St.Side.LEFT)
             cr.arc(cornerRadius,
                    borderWidth + cornerRadius,
@@ -894,7 +897,7 @@ const PanelCorner = new Lang.Class({
             cr.arc(0,
                    borderWidth + cornerRadius,
                    cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
-        cr.lineTo(cornerRadius, 0);
+        cr.lineTo(cornerRadius, offsetY);
         cr.closePath();
 
         let savedPath = cr.copyPath();
@@ -904,6 +907,9 @@ const PanelCorner = new Lang.Class({
         Clutter.cairo_set_source_color(cr, over);
         cr.fill();
 
+        if (noOverlap)
+            return;
+
         let offset = borderWidth;
         Clutter.cairo_set_source_color(cr, backgroundColor);